<template>
  <div>
    <div class="banner" @click='handleClickGallary'>
      <img :src="bannerImg" class="banner_img" />
      <div class="banner_info">
        <div class="banner_title">{{sightName}}</div>
        <div class="banner_number"><span class="iconfont">&#xe64a;</span>39</div>
      </div>
    </div>
    <fade-animation>
      <common-gallary v-show="flag" @close="handleClickGallary" :gallary="gallary"></common-gallary>
    </fade-animation>
  </div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallary,
    FadeAnimation
  },
  props: {
    gallary: Array,
    sightName: String,
    bannerImg: String
  },
  data () {
    return {
      flag: false
    }
  },
  methods: {
    handleClickGallary () {
      this.flag = !this.flag
    }
  }
}
</script>

<style lang="stylus" scoped>
 .banner
  overflow hidden
  height 0
  padding-bottom 52%
  position relative
  .banner_img
   width 100%
  .banner_info
   position absolute
   left 0
   bottom 0
   right 0
   line-height .6rem
   color #fff
   display flex
   background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
   .banner_title
    flex 1
    font-size .32rem
    padding 0 .2rem
   .banner_number
    padding 0 .3rem
    line-height .32rem
    height .32rem
    border-radius .2rem
    font-size .24rem
    margin-top .14rem
    background rgba(0, 0, 0, .8)
</style>
